<template>
  <div class="stepBar-container">
    <ul class="Steps">
      <li
        :class="[item.active ? 'active' : '']"
        v-for="(item, index) in stepData.list"
        :key="index"
      >
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { reactive, ref, watch } from "vue";

const stepData = reactive({
  currentIndex: 0,
  list: [
    {
      title: "填充合同内容",
      active: true,
    },
    {
      title: "编辑合同内容",
      active: false,
    },
    {
      title: "补充表单资料",
      active: false,
    },
    {
      title: "确认会审单并提交",
      active: false,
    },
  ],
});
let count = ref(0);
// 下一步
const nextStep = () => {
  count.value = 0;
  if (stepData.currentIndex === stepData.list.length - 1) return;
  stepData.currentIndex++;
  if (stepData.currentIndex > stepData.list.length - 1) return;
  stepData.list[stepData.currentIndex].active = true;
};

//  上一步
const previousStep = () => {
  if (stepData.currentIndex === 0) return;
  count.value++;
  if (count.value > 0) {
    stepData.currentIndex--;
  }
  if (stepData.currentIndex < 1) return;
  stepData.list[stepData.currentIndex].active = false;
};

watch(
  () => stepData.currentIndex,
  (value) => {
    if (value === 0) {
      stepData.list.forEach((item, index) => {
        if (index === 0) {
          item.active = true;
        }
        if (index !== 0) {
          item.active = false;
        }
      });
    }
  },
  { immediate: true }
);

//  暴露nextStep、previousStep方法
defineExpose({ nextStep, previousStep, stepData });
</script>

<style lang="scss" scoped>
$backgroundColor: #f7f7fa;
.Steps {
  height: 78px;
}
.Steps li {
  width: 242px;
  padding: 0px 0px 0 20px;
  line-height: 78px;
  background: $backgroundColor;
  display: inline-block;
  color: #fff;
  position: relative;
  float: left;
  font-size: 20px;
  font-family: SourceHanSansCN-Normal, SourceHanSansCN;
  font-weight: 400;
  color: #999999;
  text-align: center;
  margin-right: 10px;
  cursor: pointer;
}

.Steps li:after {
  content: "";
  display: block;
  border-top: 39px solid transparent;
  border-bottom: 39px solid transparent;
  border-left: 39px solid $backgroundColor;
  position: absolute;
  right: -38.5px;
  top: 0;
  z-index: 10;
}

.Steps li:before {
  content: "";
  display: block;
  border-top: 39px solid $backgroundColor;
  border-bottom: 39px solid $backgroundColor;
  border-left: 39px solid #fff;
  position: absolute;
  left: 0px;
  top: 0;
}
.Steps li:first-child {
  border-radius: 4px 0 0 4px;
  padding-left: 25px;
}

// 控制第一个的角度(注释掉就是向外的半三角形)
.Steps li:first-child:before {
  display: none;
}
// 控制最后一个的角度(注释掉就是向外的半三角形)
.Steps li:last-child:after {
  display: none;
}

.Steps li.active {
  background-color: #ff7b50;
  color: #ffffff;
}
.Steps li.active:after {
  border-left-color: #ff7b50;
}
.Steps li.active:before {
  border-top-color: #ff7b50;
  border-bottom-color: #ff7b50;
}
</style>
